<div [id]="box">属性绑定</div>
<div *ngFor="let color of colors let i=index let odd=odd">
    {{i}}
    {{odd}}
    {{color}}
</div>

<button (click)="handle($event)">点击</button>
<input type="text" (input)="inputChange($event)" name="" id="">
<hr>

<!-- 双向绑定 -->
<input [(ngModel)]="title" type="text">
<p>title:{{title}}</p>
<hr>

年龄：<input type="text" [formControl]="age">
<br>
<p>年龄:{{age.value}}</p>
<button (click)="ageChangeFun(age.value)">长大1岁</button>
<hr>
<!-- 动态表单控件组 -->
<form action="" [formGroup]="loginForm">
    <label>
        账号:
        <input type="text" formControlName='userName'>
    </label>
    <label>
        密码:
        <input type="text" formControlName='passWord'>
    </label>
    <button (click)="subFormFun()">提交</button>
</form>

<hr>
<hr>
<hr>
<form action="">
    账号: <input required #nameInp="ngModel" type="text" [(ngModel)]="fromData.username" name="username">
    <br>
    <span>{{nameInp.valid}}</span>
    <hr>
    密码: <input required #pasInp="ngModel" type="text" [(ngModel)]="fromData.password" name="password">
    <br>
    <span>{{pasInp.valid}}</span>
    <hr>
    <button (click)="subBtnFun(nameInp)">提交</button>
</form>

<hr><hr><hr>
<!-- 自定义表单验证 -->
<form action="" [formGroup]="valiDataForm">
    <label>
        账号:
        <input type="text" formControlName='userName'>
        <br>
        <p *ngIf="valiDataForm.get('userName')?.errors?.required">请输入账号</p>
        <p *ngIf="valiDataForm.get('userName')?.errors?.minlength?.requiredLength
        ||valiDataForm.get('userName')?.errors?.maxlength?.requiredLength">账号长度在6-18位之间</p>
    </label>
    <label>
        密码:
        <input type="text" formControlName='password'>
        <br>
        <p *ngIf="valiDataForm.get('password')?.errors?.msg">{{valiDataForm.get('password')?.errors?.msg}}</p>
    </label>
    <label>
        手机号:
        <input type="text" formControlName='phone'>
    </label>
    <p *ngIf="valiDataForm.get('phone')?.errors?.msg">{{valiDataForm.get('phone')?.errors?.msg}}</p>
    <button (click)="subvaliDataFormFun()">提交</button>
</form>
<hr>
<p>{{datStr}}</p>
<p>{{datStr  | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<hr>
<p>{{box}}</p>
<p>{{box | uppercase}}</p>
<p>{{box | test}}</p>